<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的容器用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-layout>
                  <g-sider >侧边Sider</g-sider>
              <g-layout>
              <g-header class="demo" >导航头部Header</g-header>
              <g-content>内容</g-content>
              <g-footer class="demo">底部</g-footer>
              </g-layout>
          </g-layout>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="one">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gIcon from "../../../src/Icon.vue";
import gHeader from "../../../src/Header.vue";
import gContent from "../../../src/Content.vue";
import gFooter from "../../../src/Footer.vue";
import gSider from "../../../src/Sider.vue";
import gLayout from "../../../src/Layout.vue";
import mixin from "../mixin";

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      codeStr: `<g-layout>
                  <g-sider >4</g-sider>
              <g-layout>
              <g-header class="demo" >1</g-header>
              <g-content>2</g-content>
              <g-footer class="demo">3</g-footer>
              </g-layout>
          </g-layout>`.replace(/^\s*/gm, "")
        .trim(),
    };
  },
  components: {
    "g-icon": gIcon,
    "g-content":gContent,
    "g-header":gHeader,
    "g-footer":gFooter,
    "g-sider":gSider,
    "g-layout":gLayout,
  },
};
</script>
<style scoped lang='scss'>
.component-wrapper-demo{

::v-deep    .layout {
        height: 100vh;
        background: rgb(166, 166, 243);
      }

::v-deep      .demo {
        height: 100px;
        background: rgb(133, 133, 247);
      }

::v-deep      .sider {
        background: rgb(153, 153, 243);
        width: 100px;
      }
}

</style>
